<template>
    <div class="openai">
        <div class="content">
            <ul class="openai_ul">
                <li v-for="( item, index ) in list" key="index" >
                    <div v-if="item.userName == 'ry'" class="me">
                        <div v-html="item.content"></div>
                    </div>
                    <div v-else v-html="item.message.content" class="ai"></div>
                </li>
            </ul>
        </div>
        <div class="input_box">
            <el-input type="textarea" v-model="input" placeholder="请输入内容" class="textarea"></el-input>
            <el-button :type=" loading ? 'primary': 'info' " @click="gitOpenAI" :icon="loading ? 'top' : 'loading'" style="margin-top: auto;"></el-button>
        </div>

    </div>
</template>
  
<script>
//npm install highlight.js
import hljs from 'highlight.js';
import 'highlight.js/styles/monokai.css';

import axios from 'axios';

export default {
name: "openAI",
data() {
    return {
        loading:true,
        list:[
        {
            userName: 'ry',
            content: '请帮我写一个react 事件绑定的实例'
        },
        {
            message:{
                content:"当在React中使用事件时，可以通过将事件处理函数绑定到组件上的方式来实现。以下是一个简单的React组件，展示了如何绑定一个点击事件：\n\n```jsx\nimport React from 'react';\n\nclass EventExample extends React.Component {\n  handleClick = () => {\n    alert('Button clicked!');\n  }\n\n  render() {\n    return (\n      <div>\n        <button onClick={this.handleClick}>Click me</button>\n      </div>\n    );\n  }\n}\n\nexport default EventExample;\n```\n\n在这个例子中，我们定义了一个`handleClick`方法作为事件处理函数，并将其绑定到button元素的`onClick`属性上。当按钮被点击时，`handleClick`方法将被调用，弹出一个警告框显示\"Button clicked!\"。\n\n注意：在React中，事件处理函数必须以箭头函数的形式定义，以确保在调用时，`this`指向的是组件实例。",
                role: "assistant"
            }
        },
        {
            message:{
                content:"我是一个人工智能助手，可以帮助回答问题和提供信息。有什么可以帮到你的吗？",
                role: "assistant"
            }
        },
        ],
        input:'',
    };
},
components:{
},
created() {
},
mounted() {
    this.initialProcessList(); // 处理初始数据并应用高亮
},
methods: {
    fun(){
    },
    // 新增的处理内容的方法
    processAndHighlightContent(item) {
        if(!item.message || !item.message.content){
            if(item.content){
                item.content = item.content.replace(/```(.*?)\n([\s\S]*?)```/g, (match, lang, code) => {
                    code = this.htmlEscape(code);
                    return `<pre><code class="${lang}">${code}</code></pre>`;
                });
            }
            return item;
        };
        let content = item.message.content;

        // 将文本中的特殊代码块标记转换为 HTML 代码块
        content = content.replace(/```(.*?)\n([\s\S]*?)```/g, (match, lang, code) => {
        // HTML转义处理
        code = this.htmlEscape(code);
        return `<pre><code class="${lang}">${code}</code></pre>`;
        });

        // 更新item内容格式
        let processedItem = { ...item, message: { ...item.message, content } };

        return processedItem;
    },
    gitOpenAI() {
        if (this.loading && this.input.trim()) {
            this.loading = false;
            let params = {
                userName: 'ry',
                content: this.input
            };
            this.list.push(params);
            this.input = ''; // 清空输入框
            this.scrollBarFun();
            axios.get('http://190.92.203.83/aiFun', { params })
                .then(response => {
                    // 使用processAndHighlightContent处理获取到的数据
                    let responseData = this.processAndHighlightContent(response.data);
                    this.list.push(responseData);
                    // 在DOM更新后，应用highlight.js高亮代码
                    this.$nextTick(() => {
                        document.querySelectorAll('pre code').forEach((block) => {
                            hljs.highlightElement(block);
                        });
                    });
                    this.loading = true;
                    this.scrollBarFun();
                    console.log(this.list);
                }).catch(error => {
                    console.error('Error fetching data:', error);
                    this.loading = true; // 重置加载状态
                });
        }
    },
    initialProcessList() {
        this.list = this.list.map(item => this.processAndHighlightContent(item));
        // 在DOM更新后，应用highlight.js高亮代码
        this.$nextTick(() => {
            document.querySelectorAll('pre code').forEach((block) => {
                hljs.highlightElement(block);
            });
        });
    },
    applyHighlight() {
        this.$nextTick(() => {
            document.querySelectorAll('pre code').forEach((block) => {
                hljs.highlightElement(block);
            });
        });
    },
    htmlEscape(text) {
        return text
            .replace(/&/g, "&amp;")
            .replace(/</g, "&lt;")
            .replace(/>/g, "&gt;")
            .replace(/"/g, "&quot;")
            .replace(/'/g, "&#039;");
    },
    //导航重置
    scrollBarFun(){
        // 获取导航条元素
        const navBar = document.querySelector('.content');
        // 延时滚动到底部操作
        setTimeout(() => {
            // 将导航条滚动到底部
            navBar.scrollTop = navBar.scrollHeight;
        }, 100); // 100毫秒延时，可以根据实际情况调整延时时间
    },
},
};
</script>
  
<style lang='scss' scoped>
.openai{
    width: 100%;
    height: calc(100vh - 84px);
    padding: 10px;
    display: flex;
    gap: 10px;
    flex-direction: column;
    div{
        flex-grow: 0;
    }
    .content{
        flex-grow: 1;
        overflow-y: auto;
    }
    .input_box{
        display: flex;
        gap: 10px;
        padding: 20px 50px;
        box-shadow: 1px 1px 3px 1px rgba(0,0,0,0.2);
        textarea{
            height: 360px;
            border-radius: 5px;
        }
    }
}
.openai_ul{
    padding: 10px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    li{
        > div{
            max-width: 70%;
            padding: 10px;
            border-radius: 5px;
            box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.3);
        }
        .me{
            float: left;
            border:solid 2px rgb(104, 241, 99);
            color: #666666;
            white-space: pre-wrap;
        }
        .ai{
            float: right;
            border:solid 2px rgb(103, 166, 255);
            white-space: pre-wrap; /* 保留空白符，自动换行 */
        }
    }
}
</style>

<style lang='scss'>
.ai pre {
    background-color: #282c34; /* 深色背景 */
    color: #abb2bf; /* 浅色文字 */
    padding: 10px;
    border-radius: 5px;
}
</style>